<template>
	<view class="content">
		<view class="top">
			<image src="@/static/bj.png"></image>
			<view class="money">
				当前永久金币
				<view class="num">
					{{info.forever_coin}}
				</view>
			</view>
		</view>
		<radio-group @change="changeNum" class="uni-radio-group">
			<view class="moneys" v-for="(item,index) in moneyList" :key="index">
				<image class="bj" :src="item.img"></image>
				<view class="cont">
					<view class="cont-top">
						<view class="left" :style="{'background': item.color}">
							{{item.title}}
						</view>
						<radio :value="index" style="transform:scale(0.7)" :checked="num == item.price"
							color="#F75581" />
					</view>
					<view class="money">
						￥{{item.price}} <span :style="{'background': item.color2}">多送{{item.give_money}}元</span>
					</view>
					<view class="cont-bottom">
						<image src="@/static/gold.png"></image>
						<view class="text">
							{{item.forever_coin}}永久金币+{{item.give_coin}}赠送金币
						</view>
					</view>
				</view>
			</view>
		</radio-group>
		<view class="bottom">
			<view class="button" @click="pay">
				支付
			</view>
		</view>
		<popup-gold ref="goldRef" :video="video"></popup-gold>
	</view>
</template>

<script>
	import utils from '@/utils/util.js'
	import PopupGold from '@/components/popup-gold/index.vue'
	export default {
		components: {
			PopupGold
		},
		data() {
			return {
				moneyList: [],
				num: "",
				baseUrl: '',
				lang: '',
				id: '',
				info: {},
				video: [],
				forever_coin: '',
				normal_coin: ''
			}
		},
		onLoad(e) {
			this.id = uni.getStorageSync('userinfo').id
			this.rechargeRule()
			this.searchUser()
		},
		methods: {
			searchVideo() {
				uni.request({
					url: this.configs.webUrl + '/api/video/searchVideo',
					data: {
						page: 1,
						page_size: 3,
						lang: uni.getStorageSync('language')
					},
					success: res => {
						this.video = res.data.data.list
					}
				});
			},
			setMoneyList() {
				this.moneyList.forEach(item => {
					this.$set(item, 'img', this.configs.webUrl + item.img)
				})
			},
			searchUser() {
				uni.request({
					url: this.configs.webUrl + '/api/recharge/getUserInfo',
					data: {
						user_id: this.id
					},
					success: (res) => {
						this.info = res.data.data
						if (this.info.is_recharge_new == 0) {
							this.searchVideo()
							this.$refs.goldRef.open()
						}
						if (res.data.code == 0) {
							utils.toast(res.data.msg)
						}
					}
				})
				this.rechargeRule()
			},
			changeNum(e) {
				console.log(e);
				let info = this.moneyList[e.detail.value]
				this.num = info.price
				this.forever_coin = info.forever_coin
				this.normal_coin = info.give_coin
			},
			rechargeRule() {
				uni.request({
					url: this.configs.webUrl + '/api/recharge/rechargeRule',
					success: (res) => {
						console.log(res);
						this.moneyList = [{
							color: '#FFCD7E',
							color2: '#FDBD53',
							img: '/img/zficon1.png',
						}, {
							color: '#EEBC91',
							color2: '#BC8253',
							img: '/img/zficon2.png',
						}, {
							color: '#EEBC91',
							color2: '#BC8253',
							img: '/img/zficon3.png',
						}, {
							color: '#FF9895',
							color2: '#FF9895',
							img: '/img/zficon4.png',
						}]
						this.setMoneyList()
						this.moneyList.forEach((item, index) => {
							this.$set(item, 'title', res.data.data[index].title)
							this.$set(item, 'price', res.data.data[index].price)
							this.$set(item, 'give_money', res.data.data[index].give_money)
							this.$set(item, 'forever_coin', res.data.data[index].forever_coin)
							this.$set(item, 'give_coin', res.data.data[index].give_coin)
						})
					}
				})
			},
			pay() {
				if (!this.id) {
					utils.toast('未携带用户信息');
					return
				}
				if (!this.num) {
					utils.toast('金额不正确')
					return false
				}
				var that = this
				let is_recharge_new = that.info.is_recharge_new == 0?1:0
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								url: that.configs.webUrl + '/api/virtual_payment/getPayOrder',
								method: 'GET',
								data: {
									token: uni.getStorageSync("userinfo").token, //你的小程序的secret,  
									code: res.code, //wx.login 登录成功后的code  
									buy_num: that.num,
									forever_coin: that.forever_coin,
									normal_coin: that.normal_coin,
									is_new_user_recharge: is_recharge_new
								},
								success: (cts) => {

									var pay_res = cts.data;

									if (pay_res.code == 200) {
										wx.requestVirtualPayment({
											signData: JSON.stringify({
												offerId: pay_res.data.signData.offerId,
												buyQuantity: pay_res.data.signData
													.buyQuantity,
												env: pay_res.data.signData.env,
												currencyType: 'CNY',
												platform: pay_res.data.signData
													.platform,
												productId: pay_res.data.signData
													.productId,
												goodsPrice: pay_res.data.signData
													.goodsPrice,
												outTradeNo: pay_res.data.signData
													.outTradeNo,
												attach: pay_res.data.signData.attach,
											}),
											paySig: pay_res.data.pay_sing,
											signature: pay_res.data.signature,
											mode: 'short_series_coin',
											success(res_msg) {
												console.log('requestVirtualPayment success',
													res_msg)
												uni.request({
													url: that +
														'/api/virtual_payment/rechargePaySuccess',
													method: 'POST',
													data: {
														token: uni.getStorageSync(
															"userinfo")
														.token, //你的小程序的secret,  
														trade_no: pay_res.data.signData
															.outTradeNo,
														pay_sing: pay_res.data
															.pay_sing,
														signature: pay_res.data
															.signature
													},
													success: (cts) => {
														console.log(99999999999,
															'支付成功');
														uni.navigateBack()
													},
													fail: (err1) => {
														console.log(err1);
														//失败的回调
													}
												})
											},
											fail({
												errMsg,
												errCode
											}) {
												console.error(errMsg, errCode)
											},
										})
									}
								},
								fail: (err1) => {
									console.log(err1);
									//失败的回调
								}
							});

						} else {
							console.log('登录失败！' + res.errMsg)
							uni.showToast({
								title: res.errMsg,
								icon: "none"
							});
						}
					}
				})
			},
			isGetOpenid() {
				if (!this.id) {
					utils.toast('未携带用户信息');
					return
				}
				//是否获取了openid
				uni.request({
					url: this.configs.webUrl + '/api/recharge/isGetOpenid',
					data: {
						user_id: this.id
					},
					success: (res) => {
						console.log(res);
						if (!res.data.data.openid) {
							this.wechatLogin()
						}
						if (res.data.data.openid == 1) {
							this.rechargeRule()
						}
					}
				})
			},
			GetUrlParam(paraName) {
				//微信回调 回回调当前请求的域名 所以需要从链接后获取参数
				var url = document.location.toString();
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arrPara = arrObj[1].split("&");
					var arr;
					for (var i = 0; i < arrPara.length; i++) {
						arr = arrPara[i].split("=");
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
					return "";
				} else {
					return "";
				}
			},
			wechatLogin() {
				let code = this.GetUrlParam('code');
				console.log(code);
				uni.request({
					url: this.configs.webUrl + '/api/recharge/bindOpenid',
					data: {
						user_id: this.id,
						code: code
					},
					success: (res) => {
						console.log(res);
						// if(res.data.code == 0) {
						// 	this.jumpPage()
						// }
						this.rechargeRule()
					}
				})
			},
			jumpPage() {
				let appid = 'wxca82196ffea95a9a';
				let uri = encodeURIComponent(window.location.href);
				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
					"&redirect_uri=" +
					uri +
					"&response_type=code&scope=snsapi_userinfo&state=state&wechat_redirect&connect_redirect=1#wechat_redirect";
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: initial;
	}

	.content {
		padding: 40rpx;

		.user {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			width: 100%;
			border-radius: 50rpx;
			background: #fff;

			input {
				width: calc(100% - 170rpx);
				text-align: center;
			}

			.button {
				width: 170rpx;
				background: linear-gradient(90deg, #f75581 0%, #c860ff 100%);
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 68rpx;
				line-height: 68rpx;
			}
		}

		.user-info {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.right {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #47464c;

				.id {
					font-size: 28rpx;
				}
			}
		}

		.top {
			border-radius: 32rpx;
			background: #fff;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
			position: relative;
			overflow: hidden;
			height: 244rpx;

			image {
				width: 100%;
				height: 244rpx;
			}

			.money {
				position: absolute;
				top: 0;
				padding: 44rpx 40rpx;
				z-index: 10;
				color: #fff;

				.num {
					margin-top: 32rpx;
					font-weight: 600;
					font-size: 64rpx;
				}
			}
		}

		.uni-radio-group {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 60rpx;

			.moneys {
				width: 47%;
				margin-bottom: 30rpx;
				position: relative;

				.bj {
					width: 100%;
					height: 212rpx;
				}

				.cont {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					overflow: hidden;
					border-radius: 20rpx;

					.cont-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							padding: 10rpx 15rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #ffffff;
							border-radius: 20rpx 0 20rpx 0;
						}
					}

					.money {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #2f3438;
						display: flex;
						align-items: center;
						width: 90%;
						margin: 20rpx auto;

						span {
							margin-left: 20rpx;
							padding: 10rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							border-radius: 50rpx;
						}
					}

					.cont-bottom {
						display: flex;
						justify-content: space-between;
						width: 90%;
						margin: 0 auto;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						.text {
							width: calc(100% - 40rpx);
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #2F3438;
						}
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			background: #fff;
			box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
			padding: 20rpx 30rpx;
			height: 140rpx;

			.button {
				background: linear-gradient(90deg, #f75581 0%, #c860ff 100%);
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>